<template>
  <div>
    <div>
      <el-card>
        <!-- 题库列表 -->
        <el-form label-width="80px">
          <el-row :gutter="0">
            <el-col :span="5"
              ><div class="grid-content bg-purple">
                <el-form-item label="学科">
                  <el-select v-model="form.subject" placeholder="请选择">
                    <el-option
                      v-for="item in subjectlist"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>
            <el-col :span="5"
              ><div class="grid-content bg-purple">
                <el-form-item label="阶段">
                  <el-select v-model="form.step" placeholder="请选择">
                    <el-option key="1" label="初级" value="1"> </el-option>
                    <el-option key="2" label="中级" value="2"> </el-option>
                    <el-option key="3" label="高级" value="3"> </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="5"
              ><div class="grid-content bg-purple">
                <el-form-item label="企业">
                  <el-select v-model="form.enterprise" placeholder="请选择">
                    <el-option
                      v-for="item in enterpriselist"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <el-form-item label="题型">
                  <el-select v-model="form.type" placeholder="请选择">
                    <el-option key="1" label="单选" value="1"> </el-option>
                    <el-option key="2" label="多选" value="2"> </el-option>
                    <el-option key="3" label="简答" value="3"> </el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>
          </el-row>
          <!--  -->
          <el-row :gutter="0">
            <el-col :span="5"
              ><div class="grid-content bg-purple">
                <el-form-item label="难度">
                  <el-select v-model="form.difficulty" placeholder="请选择">
                    <el-option key="1" label="简单" value="1"> </el-option>
                    <el-option key="2" label="一般" value="2"> </el-option>
                    <el-option key="3" label="困难" value="3"> </el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>
            <el-col :span="5"
              ><div class="grid-content bg-purple">
                <el-form-item label="作者">
                  <el-input v-model="form.username"></el-input
                ></el-form-item>
              </div>
            </el-col>
            <el-col :span="5"
              ><div class="grid-content bg-purple">
                <el-form-item label="状态">
                  <el-select v-model="form.status" placeholder="请选择">
                    <el-option key="0" label="禁用" value="0"> </el-option>
                    <el-option key="1" label="启用" value="1"> </el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <el-form-item label="日期">
                  <el-date-picker
                    v-model="form.create_date"
                    type="date"
                    placeholder="选择日期"
                  >
                  </el-date-picker>
                </el-form-item></div
            ></el-col>
          </el-row>
          <!--  -->
          <el-row type="flex" justify="start">
            <el-col :span="10"
              ><div class="grid-content bg-purple">
                <el-form-item label="标题">
                  <el-input v-model="form.title"></el-input>
                </el-form-item></div
            ></el-col>
            <el-col :span="14"
              ><div class="grid-content bg-purple">
                <el-form-item label-width="11px">
                  <el-button type="primary" @click="search">搜索</el-button>
                  <el-button @click="removeform">清除</el-button>
                  <el-button type="primary" @click="addclick"
                    >+新增试题</el-button
                  >
                </el-form-item>
              </div></el-col
            >
          </el-row>
        </el-form>
      </el-card>

      <el-card>
        <el-table
          v-loading="loading"
          :data="tableData"
          style="width: 100%"
          :cell-style="{ 'text-align': 'center' }"
          :header-cell-style="{ 'text-align': 'center' }"
        >
          <el-table-column label="序号">
            <template v-slot="scope">
              <span>{{ pagesize * (currentPage - 1) + scope.$index + 1 }}</span>
            </template>
          </el-table-column>

          <el-table-column label="题目">
            <template v-slot="scope">
              <span v-html="scope.row.title"></span>
            </template>
          </el-table-column>

          <el-table-column label="学科.阶段">
            <template v-slot="scope">
              <span>{{
                scope.row.subject_name + `.` + changestep(scope.row.step)
              }}</span>
            </template>
          </el-table-column>

          <el-table-column label="题型">
            <template v-slot="scope">
              <span>{{ changetype(scope.row.type) }}</span>
            </template>
          </el-table-column>

          <el-table-column label="企业">
            <template v-slot="scope">
              <span>{{ scope.row.enterprise_name }}</span>
            </template>
          </el-table-column>

          <el-table-column label="创建者">
            <template v-slot="scope">
              <span>{{ scope.row.username }}</span>
            </template>
          </el-table-column>

          <el-table-column label="状态">
            <template v-slot="scope">
              <!-- <span v-html="changestatus(scope.row.status)"></span> -->
              <el-switch
                @change="change(scope.row)"
                v-model="scope.row.status"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="0"
              >
              </el-switch>
            </template>
          </el-table-column>

          <el-table-column label="访问量">
            <template v-slot="scope">
              <span>{{ scope.row.reads }}</span>
            </template>
          </el-table-column>

          <el-table-column label="操作">
            <template v-slot="scope">
              <span>
                <el-button type="text" @click="edit(scope.row)">编辑</el-button>
                <el-button type="text" @click="statu(scope.row)">{{
                  scope.row.status ? '禁用' : '启用'
                }}</el-button>
                <el-button type="text" @click="del(scope.row)">删除</el-button>
              </span>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[1, 5, 10, 20, 50]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-card>
    </div>

    <el-collapse-transition>
      <addAndEdit ref="dia" @getdata="getdata"></addAndEdit>
    </el-collapse-transition>
  </div>
</template>

<script>
import addAndEdit from './component/index.vue'
import jscookies from 'js-cookies'
import {
  subjectlist,
  enterpriselist,
  questionlist,
  questionstatus,
  questionremove
} from '@/api/tklb'
export default {
  name: 'xklb',
  components: {
    addAndEdit
  },
  data () {
    return {
      loading: true,
      pagesize: +jscookies.getItem('pagesize') || 1,
      currentPage: 1,
      total: 0,

      subjectlist: '',
      enterpriselist: '',
      tableData: [],

      form: {
        subject: null,
        step: null,
        enterprise: null,
        type: null,
        difficulty: null,
        username: null,
        status: null,
        create_date: null,
        title: null
      }
    }
  },
  async created () {
    const res = await subjectlist({
      page: '1',
      limit: '999'
    })
    this.subjectlist = res.data.items
    const res2 = await enterpriselist({
      page: '1',
      limit: '999'
    })
    // console.log(res2)
    this.enterpriselist = res2.data.items
    this.getdata()
  },
  methods: {
    async change (v) {
      await questionstatus({ id: v.id })

      this.$message.success('修改题目状态成功')
      this.getdata()
    },
    async del (v) {
      // console.log(v)
      this.$confirm(`确定要删除此学科?`, '温馨提示', {
        type: 'warning'
      }).then(async () => {
        const res = await questionremove({ id: v.id })
        // console.log(res)
        this.$message.success('删除成功')
        if (this.pagesize == 1 && this.currentPage > 1) {
          this.currentPage--
        }
        this.getdata()
      })
    },
    async edit (v) {
      this.$refs.dia.editevent(v.id)
      this.$refs.dia.subjectlist = this.subjectlist
      this.$refs.dia.enterpriselist = this.enterpriselist
      this.$refs.dia.item = JSON.parse(JSON.stringify(v))
      this.$refs.dia.mode = false
      this.$refs.dia.dialogVisible = true
    },
    addclick () {
      this.$refs.dia.subjectlist = this.subjectlist
      this.$refs.dia.enterpriselist = this.enterpriselist
      this.$refs.dia.mode = true
      this.$refs.dia.dialogVisible = true
    },
    async statu (v) {
      // console.log(v)
      const res = await questionstatus({ id: v.id })
      // console.log(res)
      this.$message.success('修改题目状态成功')
      this.getdata()
    },
    removeform () {
      this.form = {
        subject: null,
        step: null,
        enterprise: null,
        type: null,
        difficulty: null,
        username: null,
        status: null,
        create_date: null,
        title: null
      }
      this.getdata()
    },
    handleSizeChange (v) {
      //页容量
      jscookies.setItem('pagesize', v)
      this.pagesize = v
      this.getdata()
    },
    handleCurrentChange (v) {
      //页码
      this.currentPage = v
      this.getdata()
    },
    changestep (step) {
      // console.log(step)
      if (step == 1) {
        return '初级'
      } else if (step == 2) {
        return '中级'
      } else if (step == 3) {
        return '高级'
      }
    },
    changetype (type) {
      if (type == 1) {
        return '单选'
      } else if (type == 2) {
        return '多选'
      } else if (type == 3) {
        return '简答'
      }
    },
    changestatus (status) {
      if (status == 0) {
        return '<span style=color:red>禁用</span>'
      } else if (status == 1) {
        return '启用'
      }
    },
    async search () {
      // console.log(this.form)
      this.currentPage = 1
      const res = await questionlist({
        ...this.form,
        page: this.currentPage,
        limit: this.pagesize
      })
      // console.log(res)
      this.tableData = res.data.items
      this.total = res.data.pagination.total
    },
    async getdata () {
      // console.log(this.form)
      const res = await questionlist({
        ...this.form,
        page: this.currentPage,
        limit: this.pagesize
      })
      // console.log(res)
      this.tableData = res.data.items
      this.total = res.data.pagination.total
      this.loading = false
    }
  },
  watch: {
    async total () {
      if (this.total == 1) {
        if ((this.currentPage = 1)) {
          return
        }
        this.currentPage = 1
        const res = await questionlist({
          ...this.form,
          page: this.currentPage,
          limit: this.pagesize
        })
        this.tableData = res.data.items
        this.total = res.data.pagination.total
      }
    }
  }
}
</script>

<style scoped lang="less">
.el-pagination {
  display: flex;
  justify-content: center;
}
</style>
